import React, { useState, useMemo } from 'react';
import { Card, Statistic, Row, Col, Select, DatePicker, Space } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import type { Dayjs } from 'dayjs';

interface StatisticData {
  title: string;
  value: number;
  prefix?: React.ReactNode;
  suffix?: string;
  precision?: number;
  trend?: 'up' | 'down' | 'flat';
  trendValue?: number;
  color?: string;
}

interface StatisticCardProps {
  data: StatisticData[];
  loading?: boolean;
  showFilters?: boolean;
  onPeriodChange?: (period: string) => void;
  onDateRangeChange?: (dates: [Dayjs | null, Dayjs | null] | null) => void;
  className?: string;
  gutter?: [number, number];
}

const { RangePicker } = DatePicker;

const StatisticCard: React.FC<StatisticCardProps> = ({
  data,
  loading = false,
  showFilters = true,
  onPeriodChange,
  onDateRangeChange,
  className,
  gutter = [16, 16],
}) => {
  const { t } = useTranslation();
  const [selectedPeriod, setSelectedPeriod] = useState('week');

  // 期间选项
  const periodOptions = useMemo(() => [
    { label: t('common.period.today'), value: 'today' },
    { label: t('common.period.week'), value: 'week' },
    { label: t('common.period.month'), value: 'month' },
    { label: t('common.period.quarter'), value: 'quarter' },
    { label: t('common.period.year'), value: 'year' },
    { label: t('common.period.custom'), value: 'custom' },
  ], [t]);

  // 处理期间变化
  const handlePeriodChange = (period: string) => {
    setSelectedPeriod(period);
    onPeriodChange?.(period);
  };

  // 渲染趋势图标
  const renderTrendIcon = (trend?: 'up' | 'down' | 'flat') => {
    if (!trend || trend === 'flat') return null;
    
    return trend === 'up' ? (
      <ArrowUpOutlined style={{ color: '#52c41a' }} />
    ) : (
      <ArrowDownOutlined style={{ color: '#ff4d4f' }} />
    );
  };

  // 获取趋势颜色
  const getTrendColor = (trend?: 'up' | 'down' | 'flat') => {
    const colorMap = {
      up: '#52c41a',
      down: '#ff4d4f',
      flat: '#8c8c8c',
    };
    return trend ? colorMap[trend] : undefined;
  };

  return (
    <div className={className}>
      {/* 筛选器 */}
      {showFilters && (
        <div style={{ marginBottom: 16 }}>
          <Space>
            <Select
              value={selectedPeriod}
              onChange={handlePeriodChange}
              options={periodOptions}
              style={{ width: 120 }}
            />
            
            {selectedPeriod === 'custom' && (
              <RangePicker
                onChange={onDateRangeChange}
                placeholder={[t('common.startDate'), t('common.endDate')]}
              />
            )}
          </Space>
        </div>
      )}

      {/* 统计卡片 */}
      <Row gutter={gutter}>
        {data.map((item, index) => (
          <Col xs={24} sm={12} lg={8} xl={6} key={index}>
            <Card loading={loading}>
              <Statistic
                title={item.title}
                value={item.value}
                prefix={item.prefix}
                suffix={item.suffix}
                precision={item.precision}
                valueStyle={{ 
                  color: item.color || getTrendColor(item.trend),
                  fontSize: '24px',
                  fontWeight: 'bold'
                }}
              />
              
              {/* 趋势信息 */}
              {item.trend && item.trendValue !== undefined && (
                <div style={{ 
                  marginTop: 8, 
                  fontSize: '14px',
                  color: getTrendColor(item.trend)
                }}>
                  {renderTrendIcon(item.trend)}
                  <span style={{ marginLeft: 4 }}>
                    {item.trend === 'up' ? '+' : item.trend === 'down' ? '-' : ''}
                    {Math.abs(item.trendValue)}%
                  </span>
                  <span style={{ marginLeft: 4, color: '#8c8c8c' }}>
                    {t('common.compared')}
                  </span>
                </div>
              )}
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default StatisticCard;